<template>
  <div class="comment">
    <div
      class="back"
      @click="backLast"
    >
      &gt; 返回上一级
    </div>
    <div
      v-for="item in order.oOrderDetails"
      :key="item.id"
      class="goodInfo"
    >
      <img
        :src="item.DefaultImage"
        alt=""
      >
      <div class="detail">
        <div class="title">
          {{ item.cProductName }}
        </div>
        <div class="price">
          ￥{{ item.fSalePrice }}
        </div>
        <div
          class="btn"
          @click="todetail()"
        >
          订单详情
        </div>
      </div>
    </div>
    <div class="commentBox">
      <el-rate
        v-model="iStars"
        :colors="['#F0406F','#F0406F','#F0406F']"
      />
      <div class="tips">
        宝贝与描述相符(打分匿名)
      </div>
      <el-input
        v-model="textarea"
        type="textarea"
        :rows="10"
        placeholder="请输入内容"
        style="height: 14rem;resize: none;"
      />
      <div class="carme">
        <el-upload
          :action="`${base.sq}`+ '/client/FileUpload/upload?size=M&terminaltype=PC'"
          list-type="picture-card"
          :on-success="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="6"
          :file-list="fileList"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img
            width="100%"
            :src="images"
            alt=""
          >
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible">
          <img
            width="100%"
            :src="dialogImageUrl"
            alt=""
            height="100%"
          >
        </el-dialog>
      </div>
    </div>
    <div class="subBox">
      <div
        class="btns"
        @click="pinjia"
      >
        发表
      </div>
      <div
        class="names"
        @click="changeCheck"
      >
        <img
          :src="checked?selected:selectedOff"
          alt=""
        >
        <div>匿名评价</div>
      </div>
    </div>
  </div>
</template>

<script>
import base from '@/api/base'; // 导入接口域名列表
export default {
	data() {
		return {
			base,
			textarea: '',
			dialogImageUrl: '',
			dialogVisible: false,
			disabled: false,
			checked: true,
			selected: require("../../assets/img/selected.png"),
			selectedOff: require("../../assets/img/un_selected.png"),
			cOrderNo: '',
			iShopId: '',
			order: '',
			length: '',
			iStars: null,
			ImagesArr:[],
			fileList: [],
			images: '',
		};
	},
	mounted() {
		this.cOrderNo = this.$route.query.cOrderNo;
		this.iShopId = this.$route.query.iShopId
		this.getDetail()
	},
	methods: {
		backLast() {
		// this.$emit('backLast',-1)
			this.$router.go(-1);
		},
		//获取订单详情
		getDetail() {
			let params = {
				token: localStorage.getItem('token'),
				data: {
					cOrderNo: this.cOrderNo,
					iShopId: this.iShopId
				}
			};
			this.$api.person.getDetail(params).then(res => {
				if (res.code == 200) {
					this.order = res.data;
					this.length = res.data.oOrderDetails.length;
					let sum = 0;
					this.order.oOrderDetails.forEach(item => {
						sum += item.salePoints
					})
					this.salePoints = sum;
				} else {
					this.$message.error(res.message);
				}
			});
		},
		// 移除
    handleRemove(file, fileList) {
      console.log('移除', file, fileList);
      let NewFileList = []
      for(let i = 0; i < fileList.length; i++) {
        NewFileList.push(fileList[i].response.data.imgurl)
      }
      this.ImagesArr = NewFileList
      this.ImagesArrToString(NewFileList)
    },
		// 图片格式转化
    ImagesArrToString(ImagesArr) {
      console.log('图片格式转化', ImagesArr)
      this.images = ImagesArr.join(';')
    },
    // 上传成功
    handlePictureCardPreview(response, file, fileList) {
      console.log('上传',response, file, fileList)
      let NewFileList = []
      for(let i = 0; i < fileList.length; i++) {
        NewFileList.push(fileList[i].response.data.imgurl)
      }
      this.ImagesArr = NewFileList
      this.ImagesArrToString(NewFileList)
    },
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
		changeCheck() {
			this.checked = !this.checked;
		},
		todetail() {
			this.$router.push({
				path: '/person/orderDetail',
				query: {
					cOrderNo: this.cOrderNo,
					iShopId: this.iShopId
				}
			})
		},
		pinjia() {
			console.log('this.data', JSON.parse(JSON.stringify(this.order.oOrderDetails)),  JSON.parse(JSON.stringify(this.order)),this.images)
			let sendData = {
				isMember: true,
				models: []
			}
			this.order.oOrderDetails.forEach(item =>{
				let pindata = {
					iOrderDetail_Id: item.id,
					cComment: this.textarea,
					commentPics: this.images,
					iOrder_Id: this.order.id,
					iProductSKU_Id: item.iSKUId,
					iProduct_Id: item.iProductId,
					iStars:this.iStars,
					iType: 20,
					isAnonymous: false,
					logisticStars: 0,
					serviceStars: 0,
				}
				sendData.models.push(pindata)
			})
			console.log('sendData', sendData)
			let params ={
				token: localStorage.getItem('token'),
				data: sendData
			}
			this.$api.person.saveBatch(params).then(res => {
				if (res.code == 200) {
					this.$message.success(res.message);
					this.$router.go(-1)
				} else {
					this.$message.error(res.message);
				}
			});
		}
	}
}
</script>
<style lang="scss">
	.comment {
		.back{
			position: relative;
			top: -4rem;
			left: 0;
			width: 9.69rem;
			height: 2.25rem;
			background: #000000;
			display: flex;
			justify-content: center;
			align-items: center;
			
			font-size: 0.88rem;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			cursor: pointer;
		}
		.carme {

			.el-dialog {
				overflow: hidden;
				padding: 1px 0;
				text-align: center;
			}

			.el-upload-list--picture-card {
				display: flex;
				flex-flow: row wrap;
				justify-content: flex-start;

				.el-upload-list__item {
					height: 7rem;
					width: 7rem;
					// line-height: 7rem;

					>div {
						>img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.el-upload--picture-card {
		height: 7rem;
		width: 7rem;
		line-height: 7rem;
	}
</style>
<style scoped lang="scss">
	.comment {
		.goodInfo {
			padding: 2.88rem 2.25rem 3.63rem;
			background-color: #fff;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: flex-start;
			margin-bottom: 0.44rem;

			img {
				width: 17rem;
				height: 16.88rem;
				object-fit: contain;
			}

			.detail {
				padding-left: 3.44rem;

				.title {
					font-size: 1rem;
					color: #666666;
					line-height: 1.88rem;
					width: 24.69rem;
					padding-bottom: 2.56rem;
				}

				.price {
					font-size: 1.67rem;
					padding-bottom: 3.13rem;
					color: #666;
				}

				.btn {
					font-size: 1rem;
					color: #666666;
					cursor: pointer;

					&:hover {
						text-decoration: underline;
					}
				}
			}
		}

		.commentBox {
			padding: 1.94rem 2rem;
			background-color: #fff;
			margin-bottom: 0.44rem;

			.starGroup {
				display: flex;
				flex-direction: row;
				margin-bottom: 2.31rem;

				li {
					width: 1.41rem;
					height: 1.41rem;
					margin-right: 0.81rem;
				}
			}

			.tips {
				color: #666;
				font-size: 1rem;
				padding-bottom: 1.88rem;
			}
		}

		.carme {

			cursor: pointer;
			margin-top: 0.94rem;

			>div {
				display: flex;
				flex-flow: row wrap;

				.el-dialog__body {
					>img {
						width: 30rem;
						height: 30rem;
					}
				}

				img {
					width: 1.69rem;
					height: 1.63rem;

					vertical-align: middle;
				}
			}
		}

		.subBox {
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 1.94rem 2rem;

			.names {
				color: #666666;
				font-size: 1rem;
				cursor: pointer;
				display: flex;
				flex-direction: row;

				>img {
					width: 1.2rem;
					height: 1rem;
					padding-right: 0.56rem;
				}
			}

			.btns {
				width: 13.75rem;
				cursor: pointer;

				&:hover {
					opacity: 0.8;
				}

				height:3rem;
				margin-right: 1.5rem;
				background:rgba(240, 64, 111, 1);
				font-size: 1rem;
				color: #fff;
				text-align: center;
				line-height: 3rem;
			}


		}
	}
</style>
